<template>
  <div class="studyBox">
    <!-- 试题部分 -->
    <div class="left">
      <div class="positionBox position1"></div>
      <div class="positionBox position2"></div>
      <div class="positionBox position3"></div>
      <div class="positionBox position4"></div>
      <!-- 算一算 部分 -->
      <div class="leftSYS">
        <div class="titleSYS">算一算 部分</div>
        <!-- 算一算 部分习题数组 -->
        <div class="styleBox">
          <div v-for="(item, index) in studySYS" :key="index">
            <div class="studyItem">
              <div class="num">{{ item[0] }}</div>
              <div class="ufunc">{{ item[1] }}</div>
              <div class="num">{{ item[2] }}</div>
              <div class="ufunc">{{ item[3] }}</div>
              <div class="num">{{ item[4] }}</div>
              <div class="ufunc">=</div>
              <div class="num showNum" v-show="isShowResult">{{ item[5] }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 填一填 部分 -->
      <div class="leftTYT">
        <div class="titleSYS">填一填 部分</div>
        <!-- 填一填 部分习题数组 -->
        <div class="styleBox">
          <div v-for="(item, index) in studyTYT" :key="index">
            <div class="studyItem">
              <div class="num" :class="{ showNum: item[6] == 'num1' }">
                <p v-show="!(item[6] == 'num1') || isShowResult">{{ item[0] }}</p>
              </div>
              <div class="ufunc">{{ item[1] }}</div>
              <div class="num" :class="{ showNum: item[6]  == 'num2' }">
                <p v-show="!(item[6]  == 'num2') || isShowResult">{{ item[2] }}</p>
              </div>
              <div class="ufunc">=</div>
              <div class="num" :class="{ showNum: item[6] == 'num3' }">
                <p v-show="!(item[6] == 'num3') || isShowResult">{{ item[3] }}</p>
              </div>
              <div class="ufunc">{{ item[4] }}</div>
              <div class="num" :class="{ showNum: item[6] == 'num4' }">
                <p v-show="!(item[6] == 'num4') || isShowResult">{{ item[5] }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 除法 部分 -->
      <div class="leftBYB">
        <div class="titleSYS">除法 部分</div>
        <!-- 除法 部分习题数组 -->
        <div class="styleBox">
          <div v-for="(item, index) in studyCF" :key="index">
            <div class="studyItem">
              <div class="num" :class="{ showNum: item[5] == 'num1' }">
                <p v-show="!(item[5] == 'num1') || isShowResult">{{ item[0] }}</p>
              </div>
              <div class="ufunc">{{ item[1] }}</div>
              <div class="num" :class="{ showNum: item[5]  == 'num2' }">
                <p v-show="!(item[5]  == 'num2') || isShowResult">{{ item[2] }}</p>
              </div>
              <div class="ufunc">=</div>
              <div class="num" :class="{ showNum: item[5] == 'num3' }">
                <p v-show="!(item[5] == 'num3') || isShowResult">{{ item[3] }}</p>
              </div>
              <div class="num">余</div>
              <div class="num" :class="{ showNum: item[5] == 'num4' }">
                <p v-show="!(item[5] == 'num4') || isShowResult">{{ item[4] }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 时间 + 分数 + 用时 部分 -->
      <div class="leftBottom">
        <div class="lebelBox" style="width: 35%;">时间：{{ date }} -- {{ getWeek }}</div>
        <div class="lebelBox">分数</div>
        <div class="lebelBox">用时</div>
      </div>

    </div>
    <!-- 操作部分 -->
    <div class="right">
      <div class="rightItem">
        <el-button type="primary" @click="get50Arr">50 内综合</el-button>
        <el-button type="primary" @click="get100Arr">100 内综合</el-button>
        <el-button type="primary" @click="get200Arr">200 内综合</el-button>
      </div>
      <div class="rightItem">
        <el-button type="primary" @click="getStudyArr">试 题</el-button>
        <el-button type="success" @click="getResult">答 案</el-button>
        <el-button type="success" @click="getRotate">旋 转</el-button>
      </div>
      <div class="rightItem">
        <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
      </div>
    </div>
  </div>
</template>

<script>
import { getStudySYS, getStudyTYT, getStudyCF } from '@/components/game/study/study2.js'
import moment from 'moment'

export default {
  data() {
    return {
      ufuncArr: ['+', '-'], // 运算法则
      isShowResult: false, // 是否显示答案
      studyType: 50,

      studySYS: [], // 算一算 部分习题数组
      studyTYT: [], // 填一填 部分习题数组
      studyCF: [], // 除法 部分习题数组

      date: moment().format('YYYY-MM-DD'), // 日期
    }
  },
  created() { },
  computed: {
    getWeek() {
      let weekLabel = ''
      let weekValue = moment(this.date).day()
      if (weekValue == 0) { weekLabel = '周日' }
      if (weekValue == 1) { weekLabel = '周一' }
      if (weekValue == 2) { weekLabel = '周二' }
      if (weekValue == 3) { weekLabel = '周三' }
      if (weekValue == 4) { weekLabel = '周四' }
      if (weekValue == 5) { weekLabel = '周五' }
      if (weekValue == 6) { weekLabel = '周六' }
      return weekLabel
    }
  },
  mounted() {
    this.getStudyAll()
  },
  methods: {
    getStudyAll() {
      // console.log('getStudySYS1------', getStudySYS1(this.studyType, 9))
      this.studySYS = getStudySYS(this.studyType, 18) // 算一算 部分习题数组
      console.log('@@@@@@@@', this.studySYS)
      // console.log('getStudyTYT1------', getStudyTYT1(this.studyType, 9))
      this.studyTYT = getStudyTYT(this.studyType, 18) // 填一填 部分习题数组
      console.log('@@@@@@@@', this.studyTYT)
      // console.log('getStudyBYB1------', getStudyBYB1(this.studyType, 9))
      this.studyCF = getStudyCF(this.studyType, 18) // 除法 部分习题数组
      console.log('@@@@@@@@', this.studyCF)
    },
    // 50 内加减法 点击事件
    get50Arr() {
      this.studyType = 50
      this.isShowResult = false
      this.getStudyAll()
    },
    // 100 内加减法 点击事件
    get100Arr() {
      this.studyType = 100
      this.isShowResult = false
      this.getStudyAll()
    },
    // 200 内加减法 点击事件
    get200Arr() {
      this.studyType = 200
      this.isShowResult = false
      this.getStudyAll()
    },
    // 试题 点击事件
    getStudyArr() {
      this.isShowResult = false
    },
    // 答案 点击事件
    getResult() {
      this.isShowResult = true
    },
    // 旋转 试题的像素更高
    getRotate() {
      let div = document.getElementsByClassName('left')
      div[0].style.transform = 'rotate(-90deg)'
    }
  }
}
</script>

<style scoped>
.studyBox {
  display: flex;
}
.left {
  width: 1050px;
  height: 1500px;
  /* border: 1px solid #666; */
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  margin-top: 20px;
  margin-left: 350px;
  position: relative;
}
.positionBox {
  width: 50px;
  height: 50px;
  border: 1px solid red;
  position: absolute;
}
.position1 {
  top: 0px;
  left: 0px;
  border-right: none;
  border-bottom: none;
}
.position2 {
  top: 0px;
  right: 0px;
  border-left: none;
  border-bottom: none;
}
.position3 {
  bottom: 0px;
  left: 0px;
  border-right: none;
  border-top: none;
}
.position4 {
  bottom: 0px;
  right: 0px;
  border-left: none;
  border-top: none;
}
.leftSYS {
  width: 100%;
  height: 460px;
  /* border-bottom: 4px solid red; */
}
.titleSYS {
  width: 100%;
  height: 40px;
  /* border: 1px solid red; */
  font-weight: 500;
  line-height: 40px;
  text-indent: 1em;
}
.leftTYT {
  width: 100%;
  height: 460px;
  /* border-bottom: 4px solid blue; */
}
.leftBYB {
  width: 100%;
  height: 460px;
  /* border-bottom: 4px solid green; */
}
.styleBox {
  width: 100%;
  /* height: 150px; */
  /* border: 1px solid green; */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.studyItem {
  width: 340px;
  height: 65px;
  border-bottom: 1px solid #aaa;
  /* border: 1px solid red; */
  display: flex;
  align-items: flex-end;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
}
.num {
  width: 55px;
  height: 50px;
  /* border: 1px solid blue; */
}
.ufunc {
  width: 25px;
  height: 50px;
  /* border: 1px solid blue; */
  font-size: 25px;
}
.showNum {
  border: 1px solid #aaa;
  border-bottom: none;
  color: red;
}
.getResult {
  width: 45px;
  height: 50px;
  border: 1px solid #aaa;
  border-bottom: none;
  font-size: 30px;
}
.leftBottom {
  width: 100%;
  height: 100px;
  /* border: 1px solid black; */
  font-size: 25px;
  line-height: 100px;
  display: flex;
  justify-content: center;
}
.lebelBox {
  width: 30%;
  height: 100px;
  /* border: 1px solid red; */
}
.right {
  width: 500px;
  height: 500px;
  border: 1px solid green;
  text-align: center;
  margin-top: 300px;
  margin-left: 400px;
  font-size: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rightItem {
  width: 500px;
  height: 120px;
  /* border: 1px solid red; */
  line-height: 120px;
}
</style>
